import React from 'react';
import { Table, Input, Select } from 'antd';
import styles from './ArrayTableViewComponent.less';

const ArrayTableViewComponent = (props) => {
  const { label, items, defaultLines = 3 } = props;

  const maxLines = Math.min(defaultLines, 5);

  const columns = (items || []).filter((_, i) => i < 5).map(({ type, title }, index) => ({
    title,
    dataIndex: index,
    key: index,
    render: () => (type === 'input' ? <Select placeholder='请选择' /> : <Input placeholder='请输入' />),
  }));

  if (items && items.length > 5) {
    columns.push({
      title: '...',
      dataIndex: 5,
      render: () => '...',
    });
  }

  const dataSource = new Array(maxLines).fill({});

  return (
    <div className={`ant-form ant-form-horizontal ${styles.root} `}>
      <div className="ant-row ant-form-item">
        <div className="ant-col ant-form-item-label">
          <span className={styles.label} title={label || ''}>{label || ''}</span>
        </div>
        <div className="ant-col ant-form-item-control-wrapper">
          <div className="ant-form-item-control">
            <Table 
              dataSource={dataSource}
              pagination={false}
              columns={columns}
              footer={defaultLines > maxLines ? (() =>  <div className={styles.more}>...</div>) : false}
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default ArrayTableViewComponent;
